<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册页面</title>
    <link type="text/css" rel="stylesheet" href="/plugin/bootstrap/css/bootstrap.min.css">
    <link type="text/css" rel="stylesheet" href="/assets/css/myform.css">
    <link href="/plugin/adminlte/css/adminlte.min.css" type="text/css" rel="stylesheet">
    <link rel="stylesheet" href="/plugin/bootstrap-font/bootstrap-icons.min.css" >
    <script src="/plugin/jquery-3.7.1.min.js" ></script>
    <script src="/plugin/adminlte/js/popper.min.js" ></script>
    <script src="/plugin/bootstrap/js/bootstrap.min.js"></script>
    <script src="/plugin/adminlte/js/adminlte.min.js"></script>
    <script src="/plugin/axios.min.js"></script>
</head>
<body style="background-color: #bbcad3">

<div id="form-content"  style="height: 600px;">

    <div id="logo-div">
        <img src="/assets/img.login/logo.png" alt="标志" style="width: 120px">
    </div>
    <h2>用户注册</h2>
    <div id="errMsg" style="background-color: palevioletred; color: red;text-align: center"></div>
    <div class="form-div">
        <label for="username" class="control-label">用户名</label>
        <input type="text" id="username" name="username" placeholder="用户名" class="form-control">
    </div>
    <div class="form-div">
        <label for="password" class="control-label">密码</label>
        <input type="password" id="password" name="password" placeholder="密码" class="form-control">
    </div>
    <div class="form-div">
        <label for="realname" class="control-label">姓名</label>
        <input type="text" id="realname" name="name" placeholder="姓名" class="form-control">
    </div>
    <div class="form-div">
        <label for="gender" class="control-label">性别</label>
        <!--        <input type="text" id="u_sex" name="sex" placeholder="性别" class="form-control">-->
        <select id="gender" style="text-align: center;margin-left:110px;width: 100px" class="form-control">
            <option value="男">男</option>
            <option value="女">女</option>
        </select>
    </div>
    <div class="form-div">
        <label for="tel" class="control-label">手机号</label>
        <input oninput="validateForm()" type="text" id="tel" name="telephone" placeholder="手机号" class="form-control">
    </div>
    <div>
        <input  onclick="addUser()" type="button" value="注册并登录" class="btn btn-primary btn-login" STYLE="height: 40PX" >
    </div>

</div>
<script>
    function validateForm() {
        const username = document.getElementById("username").value;
        const password = document.getElementById("password").value;
        const name = document.getElementById("realname").value;
        const telephone = document.getElementById("tel").value;


        const usernameRegex = /^[a-zA-Z0-9_]{4,16}$/; // 示例：用户名4-16位字母数字下划线
        const passwordRegex = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}$/; // 示例：密码至少8位，包含大小写字母和数字
        const nameRegex = /^[a-zA-Z\s]+$/; // 示例：姓名只包含字母和空格
        const telephoneRegex = /^\d{11}$/; // 手机号11位

        let isValid = true;

        if (!usernameRegex.test(username)) {
            isValid = false;
        }
        if (!passwordRegex.test(password)) {
            isValid = false;
        }
        if (!nameRegex.test(name)) {
            isValid = false;
        }
        // 注意：生日字段的验证可能需要更复杂的逻辑，这里假设格式正确即可
        if (!telephoneRegex.test(telephone)) {
            isValid = false;
        }

        document.getElementById("registerButton").disabled = !isValid;
    }
    tel.onchange = function() {
        var u_telephone = this.value;
        var reg = /^\d{11}$/;
        if (!reg.test(u_telephone)) {
            alert("手机号格式不正确11位，请重新输入！");
            return false;
        }
    }

    function addUser(){
        console.log('用户注册');
        const susername = document.getElementById("username").value;
        const password=document.getElementById("password").value;
        const name=document.getElementById("realname").value;
        const sex=document.getElementById("gender").value;
        const telephone=document.getElementById("tel").value;
        const dataToAdd = {
            id: 0,
            username: susername,
            password: password,
            name: name,
            gender: sex,
            tel: telephone,
        }
        console.log(dataToAdd)
        axios.post("/api/user/reg", dataToAdd)
            .then(res=>{
                if(res.data==='ok'){
                    window.location.href = "/Home";

                }
            })
    }



</script>

</body>
</html>